<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->

    <script src="./vue.js"></script>
    <!-- 
        vue 接入步骤：
        1. 先现在 vue.js 然后将其导入
        2. 创建一个 vue 实例
        3. 将 vue 实例和页面模板进行绑定，让其产生联系
     -->
</head>

<body>
    <div id="app">
        <h1 @click="count++">{{ count }}</h1>
        <h2>{{msg}}</h2>
    </div>
</body>
<script>

    const { createApp } = Vue
    // createApp 是用来创建 vue 实例的方法

    // 创建 app 实例
    const app = createApp({
        // data 是一个选项，该选项是一个函数，而且在函数中还要 return 一个
        // 对象，对象中的内容为实例中的数据
        data() {
            return {
                // 页面中的响应式数据
                count: 100,
                msg: '锄禾日当午'
            }
        }
    })

    // 将实例挂载到目标中，让实例和 id 为 app 模板产生联系
    app.mount('#app')
</script>

</html>